/**
 * ThreedDialog module
 */

 var tool = require("../../../util/tool");
 var consts = require("../../../util/consts");
 var storage = require("../../../util/storage");
 var dataProvider = require("../provider/dataProvider");
 var SingleUpload = require("../../../util/upload/SingleUpload");
 var React = require("react");
 var ThreedDialog = React.createClass({
    getInitialState: function (){
        return {
            is_zip: 0,
            fileUploaded: false,
            unityUploaded: false,
            fileUploading: false
        }
    },
    getInitialProps: function (){
        return {
            root: {}
        }
    },
    updateUploaded: function (uploaded){
        this.setState({ fileUploaded: uploaded });
    },
    componentWillMount: function (){
        var settings = {
            upload_url: storage.data.CONST.upload_url,
            md5Field: "music_md5",
            placeholder: "请填写在线视频地址或者上传mp4格式文件",
            isAudio: false,
            isVideo: false,
            isIos: false,
            isAndroid: false,
            isZip: false,
            needInfo: false
        };

        var me = this;
        this.form = {
            model: {}
        };
        this.zip_defaultSettings = $.extend({}, settings, {
            accept: "application/zip",
            needInfo: false,
            isZip: true,
        });
        this.unity_defaultSettings = $.extend({}, settings, {
            accept: "application/zip",
            isUnity3: true,
        });
    },
    componentDidMount: function (){
        this.elements = {};
        this.elements.dialog = $(this.refs.dialog);
        this.elements.dialog.css({
            "marginTop": "-" + this.elements.dialog.height() * 0.5 + "px",
            "marginLeft": "-" + this.elements.dialog.width() * 0.5 + "px"
        });
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    handleOnChangeThreedType: function (type, e){
        this.setState({ is_zip: type });
    },
    handleOnSubmit: function (){
        var is_edit_u3d = storage.data.is_edit_u3d;
        var is_zip = this.state.is_zip;
        var root = this.props.root;
        var type = consts.WIDGET_TYPE.THREED;
        var data;

        root.closeDialog();
        if (is_zip == "0"){
            data = this.refs.zipSingleUpload.getBuildWidget();
        } else {
            data = this.refs.unitySingleUpload.getBuildWidget();
        }
        if (is_edit_u3d){
            var widget = dataProvider.getSpecifyWidgetById(storage.data.selectedWidgetId);
            widget = $.extend({}, widget, data);
            widget.isReplace = true;
            root.updateSelectedWidget(widget);
        } else {
            root.addWidgetToPage(data);
        }
    },
    checkIosAndReady: function (){
        return this.iosReady && this.andReady;
    },
    render: function (){
        var state = this.state;
        var is_zip = state.is_zip;
        var root = this.props.root;
        var type = consts.WIDGET_TYPE.THREED;

        var rStyle = {
            top: "40%",
            left: "50%",
            width: "670px",
            height: "auto",
            display: "block",
            borderRadius: '5px',
            overflow: 'hidden'
        };

        var uploadOpts = {
            maxFiles: 1,
            acceptedFiles: ".zip"
        };

        var zipInnerNode =
            <div>
                <SingleUpload ref="zipSingleUpload" type={type} settings={this.zip_defaultSettings} parent={this} root={root} />
                <div className="info_alert_3d">
                    <div>{$._("Upload FBX , waiting")}</div>
                    <div>{$._("More make model info")}<a href='/web/resource/help?select=4'>{$._("Model production specification")}</a></div>
                </div>
                <div className="form-group buttons">
                    <button type="submit" disabled={!this.state.fileUploaded} onClick={this.handleOnSubmit}>
                        <span>{$._("Submit")}</span>
                    </button>
                </div>
            </div>

        var unityInnerNode =
            <div className="">
                <SingleUpload ref="unitySingleUpload" type={type} settings={this.unity_defaultSettings} parent={this} root={root} />
                <div className="info_alert_3d">
                    <div>{$._("Upload 3D model, waiting")}</div>
                    <div>{$._("More info")}<a href='/web/resource/help?select=4'>{$._("How to derived unity3d model")}</a></div>
                </div>
                <div className="form-group buttons">
                    <button type="submit" disabled={this.state.fileUploading || !this.state.unityUploaded} onClick={this.handleOnSubmit}>
                        <span>{$._("Submit")}</span>
                    </button>
                </div>
            </div>

        return (
            <dialog id="threedDialog" ref="dialog" style={rStyle} className="btg-modal widget-form" onselectstart="return false">
                <div className="btg-modal-content">
                    <div ng-controller="WidgetFormAction">
                        <div className="widget-form-title">
                            <label>{$._('Upload 3D model')}</label>
                        </div>
                        <div className="is_zip_u3d">
                            <div onClick={this.handleOnChangeThreedType.bind(this, 0)} datatype="0" className={"threedType is_zip " + (is_zip == 0 ? "activebtn" : "noactivebtn")}>
                                <span>{$._('FBX model')}</span>
                            </div>
                            <div onClick={this.handleOnChangeThreedType.bind(this, 1)} datatype="1" className={"threedType is_u_3d " + (is_zip == 0 ? "noactivebtn" : "activebtn")}>
                                <span>{$._('unity3 model')}</span>
                            </div>
                        </div>
                        <div style={{display:is_zip == 1 ? "none" : "block"}} className="form-horizontal upload_zip">
                            {zipInnerNode}
                        </div>
                        <div style={{display:is_zip == 1 ? "block" : "none"}} className="form-horizontal upload_zip">
                            {unityInnerNode}
                        </div>
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = ThreedDialog;
